<!-- 左侧导航菜单 -->
<template>
  <div>
    <el-scrollbar>
      <el-menu style="height:100vh" class="el-menu-vertical-demo" router background-color="#304156" :default-active="$route.path" text-color="#f5f7fa" active-text-color="#ffe500" :collapse="isCollapse">
        <el-menu-item class="el-menu-item-home" v-for="item in menus.slice(0,1)" :key="item.path" :index="'/index/'+item.path">
          <i class="el-icon-s-home"></i>
          <span>{{$t(item.meta.title)}}</span>
        </el-menu-item>
        <el-submenu v-for="item in menus.slice(1)" :key="item.path" :index="'/index/'+item.path">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span>{{$t(item.meta.title)}}</span>
          </template>
          <el-menu-item v-show="items.meta.hide!=false" v-for="items in item.children" :key="items.path" :index="'/index/'+item.path+'/'+items.path">
            {{$t(items.meta.title)}}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import menus from '@/router/page'
export default {

  data() {
    return {
      menus, //路由数据
    }
  },
  props: ['isCollapse'],
}
</script>
<style scoped lang="less">
.el-scrollbar {
  height: 100%;
}

// 左侧菜单栏
.el-scrollbar {
  & ::v-deep .el-scrollbar__wrap {
    //菜单栏溢出现滚动条,注:两个__
    height: 100%;
    overflow-x: hidden;
  }
}
.layout-container-demo .el-menu {
  border-right: none;
}

.el-menu-item-home {
  //菜单首页
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/deep/.el-submenu__title {
  //菜单导航栏
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // height: 100vh;
}
</style>
